<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="active">
				<textarea class="input" v-model="content" placeholder="说点什么..."></textarea>
				<!-- <view class="fabubtn">
					<image src="../../static/fabubtn.png" mode=""></image>
				</view> -->
				<fjjImages @addImg="editParkImg" :pageImgList="imgList" :imgCount="9"></fjjImages>
			</view>
			<button class="btn" @tap="fabupengyou">立即发布</button>

		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	import fjjImages from '../../components/fjjimages/fjjimages.vue';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		components: {
			fjjImages
		},
		data() {
			return {
				imgList: [],
				imgLists: [],
				content: '',
				showimages:true,
				if_video:{
					type: Number
				}
			}
		},
		methods: {
			editParkImg(e,i) {
							
				//执行增加操作				
				this.imgLists = e
				this.if_video= i

			},
			fabupengyou() {
				if(!this.content &&  this.imgLists.length==0){
					uni.showModal({						
						content: '发送内容不能为空',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if( this.showimages){
					this.showimages = false
					uni.showLoading({
						mask: true,
						title: '班级圈发布中...'
					});	
					
					uni.request({
					    url: 'https://api.weixin.qq.com/wxa/msg_sec_check?access_token='+this.userInfo.access_token, //仅为示例，并非真实接口地址。
						method:'POST',
					    data: {								        
							content: this.content
					    },								  
					    success: (res) => {										
					        	console.log('文字上传成功')						       
					    }
					});
					for(var i=0;i<this.imgLists.length;i++){						
						uni.request({
						    url: 'https://api.weixin.qq.com/wxa/media_check_async?access_token='+this.userInfo.access_token, //仅为示例，并非真实接口地址。
							method:'POST',
						    data: {								        
								media_url: this.imgLists[i],
								media_type:this.if_video==0? 2:1
						    },								  
						    success: (res) => {										
						        	console.log('图片，视频上传成功')							       
						    }
						});
					}			
								
					this.$store
						.dispatch('uploadimages', {
							token: this.userInfo.token,
							openid: this.userInfo.openid,
							class_id: uni.getStorageSync("class_id"),
							content: this.content,
							image: this.imgLists,
							student_id: uni.getStorageSync("student_id") ? uni.getStorageSync("student_id") : 0,
							index: uni.getStorageSync("def"),
							if_video:this.if_video
					
						})
						.then(res => {
							uni.hideLoading();
							uni.showToast({
								title: '发布成功',
								icon: "none",
								
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
							
						});
				}
				
			}
		}

	}
</script>

<style lang="less">
	page {
		height: 100%;
		box-sizing: border-box;
		background-color: #f4f4f4;

	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;

		.active {
			width: 100%;
			height: 50%;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
			box-sizing: border-box;
			position: relative;

			.input {
				width: calc(100vw - 40rpx);
				font-size: 26rpx;
				color: #4e4e4e;
				// height: 160rpx;
				padding: 15rpx;
				box-sizing: border-box;
			}

			// .fabubtn{
			// 	position: absolute;
			// 	bottom: 100rpx;
			// 	left: 15rpx;
			// 	 image{
			// 		 width: 160rpx;
			// 		 height: 160rpx;
			// 	 }
			// }

		}

		.btn {
			width: calc(100vw - 40rpx);
			height: 100rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: center;
			background-image: linear-gradient(to right, #0a98f7, #23c3f3);
			position: fixed;
			bottom: 65rpx;
		}
	}
</style>
